<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实战 - 生成员工数据</title>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <h2>F12打开控制台查看数据，效果更佳</h2>
    <div id="Application">

        <h2>调用Mock生成的数据</h2>
        <h4>调用生成的人员数据</h4>
        <table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>工作</th>
                <th>ID</th>
            </tr>
            <tr v-for="itm in list_arr" :key="itm.id">
                <th>{{itm.name}}</th>
                <th>{{itm.age}}</th>
                <th>{{itm.job}}</th>
                <th>{{itm.id}}</th>
            </tr>
        </table>
    </div>

    <script>


        const App = Vue.createApp({
            setup() {

                //生成数据
                let list = Mock.mock({
                    "rows|10": [
                        {
                            id: "@guid",
                            name: "@cname",
                            "age|20-30": 23,
                            "job|1": ["前端工程师", "后端工程师", "UI工程师", "需求工程师"],
                        },
                    ],
                })



                //展示数据
                console.table(list);


                let list_arr = list.rows;
                console.table(list_arr);

                return { list_arr, }
            }
        })

        App.mount("#Application")
    </script>

</body>

</html>